import IconFont from "@/components/IconFont";
import { Input } from "antd";
import { useEffect, useState } from "react";
import Typography from "../Typography";
import Style from "./index.module.less";

function CommonInput(props) {
	const { placeholder, showCount, showEditIcon, allowclear, wrapperStyle, ...arg } = props;
	const [isShowPlaceholder, setIsShowPlaceholder] = useState(!arg.value);

	useEffect(() => {
		setIsShowPlaceholder(!arg.value);
	}, [arg.value]);

	let rightIcon = null;
	if (showEditIcon) {
		rightIcon = <IconFont style={{ cursor: "pointer" }} type="icondirect-input" />;
	}

	const style = {
		...arg.style,
		paddingRight: showCount ? 54 : undefined
	};

	return (
		<div className={Style["c-input-wrapper"]} style={wrapperStyle}>
			<Input suffix={rightIcon} {...arg} style={style}></Input>
			{placeholder && isShowPlaceholder && (
				<div className={Style["ant-input-placeholder"]}>
					{!!arg["aria-required"] && <Typography type="error">*&nbsp;</Typography>}
					{placeholder}
				</div>
			)}

			{showCount && (
				<div className={Style["count-info"]}>
					<Typography as="a1" color="#999">
						{props.value?.length || 0}
					</Typography>
					/
					<Typography as="a1" color="#B1B7C3">
						{props.maxLength}
					</Typography>
				</div>
			)}
		</div>
	);
}
export default CommonInput;
